<template>
	<cxView marginLeft="20" marginRight="20" marginTop="20">
		<!-- 商品图片 及信息-->

		<cxView display="flex">
			<!-- 左侧图片 -->
			<cxImg :src="model.proImg" width="160" height="160" borderRadius="20"></cxImg>

			<!-- 右侧标题 -->
			<cxView marginLeft="20" display="flex" flexDirection="column" justifyContent="space-between" height="160"
				class="flexGrow">
				<cxView>
					{{model.proName}}
				</cxView>

				<cxView display="flex" justifyContent="space-between">

					<cxView display="flex" alignItems="flex-end">
						<cxText>￥</cxText>
						<cxView>{{model.proPrice}}</cxView>
					</cxView>
					<cxView>
						<u-number-box v-model="numberValue" @change="numberChange" :min="1"></u-number-box>
					</cxView>
				</cxView>
			</cxView>
		</cxView>
		<!-- 商品图片 及信息结束-->
		<!-- 属性 start-->
		<cxView marginBottom="200">
			<cxView v-for="(item,index) in specs" marginTop="20" :key="index">
				<cxView>{{item.specTypeName}}</cxView>
				<cxView display="flex" marginTop="20">
					<cxView v-for="(spe,id) in item.specVoList" :key="id">
						<cxView @confirm="specClick(spe,item)">


							<!-- <view :class="spe.select ? 'selectStyle' : 'unSelectStyle'">

								<cxText :color="spe.select?'white':'#333'" size="26">{{spe.specName}}</cxText>

							</view> -->


							<cxView display="flex" padding="4rpx 30rpx" height="60" justifyContent="center"
								alignItems="center" :customStyle="spe.select ? selectStyle : unSelectStyle">

								<cxText :color="spe.select?'white':'#333'" size="26">{{spe.specName}}</cxText>

							</cxView>

						</cxView>
					</cxView>
				</cxView>

			</cxView>
			<!--  -->
		</cxView>
		<!-- :background="spe.select?'red':'white'"  :border="spe.select?'0 solid #333':'2rpx solid #333'" marginRight="20"-->
		<!-- :class="[spe.select ? 'selectStyle' : 'unSelectStyle']" -->
		<!-- 属性 end-->


		<!-- bottomBtn 开始 -->

		<cxView position="fixed" left="0" right="0" :bottom="bottom" paddingTop="20">
			<cxView display="flex" justifyContent="space-around">
				<cxView height="80" border="2rpx solid #333" display="flex" alignItems="center" justifyContent="center"
					borderRadius="40" @confirm="addCart" width="40vw">
					<cxText>加入购物车</cxText>
				</cxView>

				<cxView height="80" display="flex" alignItems="center"
					background='linear-gradient(to right bottom ,#f7d9a3, #ff8b48 )' justifyContent="center"
					borderRadius="40" @confirm="buy" width="40vw">
					<cxText color="white">立即购买</cxText>
				</cxView>

			</cxView>

		</cxView>
		<!-- bottomBtn 结束-->

	</cxView>
</template>

<script>
	export default {
		name: "cxMulSku",
		data() {
			return {
				numberValue: 1,
				selectStyle: {
					background: "#ff8b48",
					border: "0 solid #ff8b48",
					borderRadius: "30rpx",
					color: "white",
					marginRight: "20rpx"
				},
				unSelectStyle: {
					background: "white",
					border: "2rpx solid #333",
					borderRadius: "30rpx",
					color: "#333",
					marginRight: "20rpx",
				},
				bottom: uni.$cx.cxBottomSafeHeight()

			};
		},
		props: {
			model: {
				type: Object,
				default () {
					return {}
				}

			},
			specs: {
				type: Array,
				default () {
					return []
				}

			}
		},


		methods: {
			// 数量变化
			numberChange(e) {
				console.log('当前值为: ' + e.value);

			},
			specClick(spec, item) {
				// spec 点中的属性
				// console.log(spec);
				// 点击属性所属类别
				// console.log(item);

				// 遍历属性,选中及取消选中
				for (var i = 0; i < this.specs.length; i++) {
					var temp = this.specs[i];
					// debugger;
					if (temp.specTypeId == item.specTypeId) {
						for (var i = 0; i < temp.specVoList.length; i++) {
							var t = temp.specVoList[i];
							if (spec.specId == t.specId) {
								t.select = true;
							} else {
								t.select = false;
							}
						}
					}

				}
				// 遍历属性,选中及取消选中	end
				// console.log(this.specs);

				this.$emit("chooseSpec", this.specs, this.numberValue);

			},
			// 添加到购物车
			addCart() {

				this.$emit("addCartAction", this.specs)

			},
			buy() {
				this.$emit("buyAction", this.specs)
			}

		}

	}
</script>

<style lang="scss" scoped>
	.selectStyle {
		background-color: #f70;
		border: 0 solid #f70;
		border-radius: 30rpx;
		color: white;
		margin-right: 20rpx;
		// background: "#ff8b48";
		// border: "0 solid #ff8b48";
		// border-radius: "30rpx";
		// color: "white";
		// margin-right: "20rpx";
		display: flex;
		padding: 4rpx 30rpx;
		height: 60rpx;
		justify-content: center;
		align-items: center;

	}

	.unSelectStyle {
		background: white;
		border: 2rpx solid #333;
		border-radius: 30rpx;
		color: #333;
		margin-right: 20rpx;

		display: flex;
		padding: 4rpx 30rpx;
		height: 60rpx;
		justify-content: center;
		align-items: center;


	}
</style>